<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left;">
              <el-breadcrumb-item v-for="item in levelList" :key="item.id">
                <a @click="breadcrumbClick(item.id,item.title)">{{ item.title }}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown class="avatar-container right-menu-item" trigger="click" style="float: right;">
              <div class="avatar-wrapper">
                <svg-icon icon-class="menu" />
              </div>
              <el-dropdown-menu lot="dropdown">
                <el-dropdown-item v-for="item in hostGroup" :key="item.groupid" @click.native="handleHost(item.groupid)">
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-select v-model="groupIds" style="float: right;" multiple >
                <el-option
                  v-for="(item, index) in hostGroup"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item.groupid"/>
            </el-select> -->
          </div>
          <div class="chart-wrapper" :style="{backgroundColor:'#1b1b1b'}">
            <emap-chart ref="emapChart" :sup-this="supThis" :groupid="groupid" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import emapChart from './module/emapChart'
import request from '@/utils/request'
export default {
  components: { emapChart },
  mixins: [initData],
  data() {
    return {
      levelList: [{ path: '', title: '世界' }],
      hostGroup: [],
      groupIds: [],
      alarmData: [],
      statusList: [{ id: 1, value: '正常' }, { id: 2, value: '异常' }, { id: 3, value: '中断' }],
      supThis: this,
      groupid: ''
    }
  },
  created() {
    this.loading = false
    this.getHostGroup()
  },

  showModal() {
    console.log(this.$$refs)
  },

  methods: {
    checkPermission,
    handleHost(groupid) {
      this.groupid = groupid
      this.getAlarmHost(this.$refs.emapChart.curCityCode, groupid)
    },
    breadcrumbClick(id, name) {
      /* if(id){
        this.$refs.emapChart.getData(id);
      } else {
        this.$refs.emapChart.loadMap('world');
      } */
      this.$refs.emapChart.changeBreadcrumb(id, name)
    },
    getAlarmHost(cityCode, groupids) {
      /* const params = {
        cityCode: cityCode,
        groupids: groupids
      }
      request({
        url: 'web/zabbix/alarms/host',
        method: 'get',
        params
      }).then(res => {
       this.alarmData = [].concat(res)
      }).catch(err => {
        console.log(err)
      }) */
    },
    getHostGroup() {
      const params = {
      }
      request({
        url: 'web/zabbix/hostgroup/get',
        method: 'get',
        params
      }).then(res => {
        this.hostGroup = [].concat(res)
      }).catch(err => {
        console.log(err)
      })
    },
    beforeInit() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
